<div class="container user-pages">
    <!--详细信息-->
    <div class="row user-detail clearfix">
        <!--头像-->
        <div class="portrait pull-left hidden-xs">
            <em class="glyphicon glyphicon-user"></em>
            <!--<img src="" class="portrait-user">-->
            <div class="portrait-desc">
                <a href="javascript:;" class="text-center">修改头像<input type="file"></a>
            </div>
        </div>
        <!--详细信息-->
        <div class="pull-left detail">
            <div class="detail-username"><a href="javascript:;" [routerLink]="['editor']">Tony Stark</a></div>
            <div class="detail-address">美国大都会人寿保险公司大厦</div>
            <div class="detail-desc">托尼·斯塔克（Tony Stark）生于纽约长岛，仅十五岁时就进入麻省理工学院电子工程系大学部就读并以最高分毕业。在电影里，二十一岁时他的父亲霍华德·斯塔克死于车祸（其实是有策划的阴谋，在《美国队长3》中说道）。托尼·斯塔克的母亲是玛丽亚·斯塔克（Maria Stark）。斯塔克继承了父亲拥有的斯塔克企业（Stark Industries），并在接管公司后作的第一件事就是买下制造他父母座车上瑕疵刹车系统的公司并修正其设计上的缺陷。在一次前往越南</div>
        </div>
    </div>
    <!--自选-->
  <!--
    <div class="row optional">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="javascript:;"><span class="glyphicon glyphicon-file"></span>我的自选</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav"> -->
                        <!--<li class="active"><a href="javascript:;" (click)="toggleEditorGroup()">全部</a></li>-->
                    <!--    <li *ngFor="let item of optinalGroup" [class.active]="item.groupnumber==activeId"><a href="javascript:;" (click)="toggleEditorGroup(item.groupnumber)">{{item.name}}</a></li>-->
                        <!--下拉框-->
                    <!--    <li class="dropdown" *ngIf="toggleEditorGroupFlag">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">编辑分组<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:;" (click)="switchPrompt('groupRename',true)">重命名</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="javascript:;" (click)="switchPrompt('delGroup',true)">删除分组</a></li>
                            </ul>
                        </li>
                    </ul> -->
                    <!--搜索-->
            <!--        <form class="navbar-form navbar-right">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="添加自选股">
                        </div>
                        <button type="submit" class="btn btn-default">添加</button>
                    </form>
                </div>
            </div>
        </nav> -->
        <!--添加这个类：optional-content-open显示“收起”-->
  <!--       <div class="optional-content" [class.optional-content-open]="optiontoggle">
            <div *ngIf='!optionalData.length' class="optional-content-tip text-center">还没有添加自选，快去<a href="javascript:;">行情中心</a>添加吧~</div>
            <div *ngIf='optionalData.length' class="screen">
                <table class="table">
                    <thead>
                        <tr>
                            <th>名称</th>
                            <th>最新价</th>
                            <th class="updown">
                                涨跌幅
                                <span class="glyphicon glyphicon-arrow-up red"></span>
                                <span class="glyphicon glyphicon-arrow-down"></span>
                            </th>
                            <th>开盘价</th>
                            <th>昨收价</th>
                            <th>最高价</th>
                            <th>最低价</th>
                            <th><span class="glyphicon glyphicon-refresh"></span></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor='let item of optionalData'>
                            <td>{{item.name}}</td>
                            <td>{{item.newprice}}</td>
                            <td class="red">{{item.updown}}</td>
                            <td>{{item.openprice}}</td>
                            <td>{{item.yesprice}}</td>
                            <td>{{item.heightprice}}</td>
                            <td>{{item.lowprice}}</td>
                            <td>
                                <div class="manipu">
                                    <span class="glyphicon glyphicon-th-list"></span>
                                    <ul class="popup clearfix">
                                        <li class="pull-left">分组</li>
                                        <li class="border pull-left"></li>
                                        <li class="pull-left">移除</li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="tool-open" (click)="toggleOptional(true)">+&nbsp;展开</div>
            <div class="tool-close" (click)="toggleOptional(flase)">-&nbsp;收起</div>

        </div>
    </div> -->
    <!--收藏-->
  <!--  <div class="row collection">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="javascript:;"><span class="glyphicon glyphicon-star-empty"></span>我的收藏</a>
                </div>
            </div>
        </nav>
        <div class="collection-content">
            <div *ngIf="!collection.length" class="collection-content-tip text-center">还没有添加收藏，快去<a href="javascript:;">新闻资讯</a>收藏文章吧~</div>
            <ul *ngIf="collection.length" class="clearfix p-20">
                <li *ngFor="let item of collection" class="pull-left collections">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h3 class="panel-title">{{item.title}}</h3>
                        </div>
                        <div class="panel-body">
                            {{item.desc}}
                        </div>
                        <div class="panel-footer">
                            <p class="text-right">{{item.date | date : 'yy-MM-dd' }}</p>
                            <p class="text-right">{{item.collectors}}人收藏</p>
                            <div class="cancelcollect">取消收藏</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div> -->
    <!--提示框-->
    <!--重命名-->
  <!--  <div class="promptBox" [class.promptBox-hide]="" *ngIf="utils.groupRename">
        <div class="promptBox-title">编辑分组名</div>
        <div class="promptBox-body">分组名：<input type="text" [(ngModel)]="groupname"></div>
        <div class="promptBox-footer text-center">
            <button class="btn btn-primary" (click)="groupRename()">确认</button>
            <button class="btn btn-default" (click)="switchPrompt('groupRename',false)">取消</button>
        </div>
    </div> -->
    <!--删除分组-->
  <!--  <div class="promptBox" [class.promptBox-hide]="" *ngIf="utils.delGroup">
        <div class="promptBox-title">删除分组</div>
        <div class="promptBox-body">
            <p>确认删除分组吗？</p>
            <p>删除后此分组下的自选任然保留。</p>
        </div>
        <div class="promptBox-footer text-center">
            <button class="btn btn-primary" (click)="delGroup()">确认</button>
            <button class="btn btn-default" (click)="switchPrompt('delGroup',false)">取消</button>
        </div>
    </div>
</div> -->
